{$, View} = require 'atom'
_ = require 'underscore'

module.exports =
class Chooser extends View
  @content: (options)->
    @div class: 'chooser-view', =>
      @h2 options.title or ''
      @div =>
        @input id:'ButterflyRadio', type:'radio', style: 'margin-bottom: 15px',name:'project-template', value:'Butterfly', click:'showButterFlyTemplate', checked:'checked'
        @span '使用Butterfly的模板', style: 'margin-right: 20px'
        @input id:'AmazeUIRadio', type:'radio', name:'project-template', value:'AmazeUI', click:'showAmazeUITemplate'
        @span '使用Amaze UI的模板'
        #grid view ， 妹子ui的模板选项
        @ul id:'ButterflyTemplates', class: 'grid-view', =>
          for item in options.ButterflyItems
            @li 'data-id': item.id, =>
              if item.glyphicon
                @span class: 'glyphicon ' + item.glyphicon or ''
              else if item.image
                @img src: item.image
              @span class: 'name', item.name
        #butterfly的模板选项
        @ul id:'AmazeUITemplates', class: 'grid-view', style: 'display:none', =>
          for item in options.AmazeUIItems
            @li 'data-id': item.id, =>
              if item.glyphicon
                @span class: 'glyphicon ' + item.glyphicon or ''
              else if item.image
                @img src: item.image
              @span class: 'name', item.name
      @div outlet: 'description', class: 'description'

  initialize: (options) ->
    @items = options.ButterflyItems.concat(options.AmazeUIItems)
    @on 'mousedown', 'li', (e) =>
      li = $(e.target).closest('li')
      e.preventDefault()
      @selectItemView(li)

  remove: ->
    super
    @off 'mousedown'

  selectItemView: (view) ->
    return unless view.length
    @find('.grid-view .selected').removeClass('selected')
    view.addClass('selected')

    @description.text @getSelectedItem().description

  selectFirstItemView: ->
    @selectItemView @find('.grid-view li:first')

  getSelectedItem: ->
    selected = @find('.grid-view li.selected')
    tpl = _.find @items, (t)-> t.id == selected.data('id')

  showButterFlyTemplate: (e)->
    butterfly = $("#ButterflyTemplates")
    amaze = $("#AmazeUITemplates")
    butterfly.css('display','block')
    butterfly.find('li:first').addClass('selected')
    @selectItemView(butterfly.find('li:first'))
    amaze.css('display','none');
    amaze.find('.selected').removeClass('selected')



  showAmazeUITemplate: (e)->
    butterfly = $("#ButterflyTemplates")
    amaze = $("#AmazeUITemplates")
    amaze.css('display','block');
    amaze.find('li:first').addClass('selected')
    @selectItemView(amaze.find('li:first'))
    butterfly.css('display','none')
    butterfly.find('.selected').removeClass('selected')
